<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>老虎机格子</title>
    <style>
      .wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        padding: 20px;
      }

      .slot {
        display: flex;
        gap: 10px;
      }

      .cell {
        overflow: hidden;
        height: 60px;
        width: 40px;
        background: #f5f5f5;
        border-radius: 8px;
        border: 2px solid #ddd;
      }

      .num {
        position: relative;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 40px;
        font-weight: bold;
        color: #333;
      }

      .roll {
        animation: rollNumbers 2s linear infinite;
        transform-origin: 50% 0;
        animation-play-state: paused;
      }

      .roll.active {
        animation-play-state: running;
      }

      .roll.shake {
        animation: shake 0.5s ease-in-out;
      }

      @keyframes rollNumbers {
        0% {
          transform: translateY(0);
        }
        100% {
          transform: translateY(-600px);
        }
      }

      @keyframes shake {
        0%,
        100% {
          transform: translateY(var(--target-y));
        }
        20% {
          transform: translateY(calc(var(--target-y) - 10px));
        }
        40% {
          transform: translateY(calc(var(--target-y) + 8px));
        }
        60% {
          transform: translateY(calc(var(--target-y) - 6px));
        }
        80% {
          transform: translateY(calc(var(--target-y) + 4px));
        }
      }

      button {
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
        background: #4caf50;
        color: white;
        border: none;
        border-radius: 4px;
        transition: background-color 0.3s;
      }

      button:hover {
        background: #45a049;
      }

      button.active {
        background: #f44336;
      }
    </style>
  </head>

  <body>
    <div class="wrap">
      <button>开始</button>
      <div class="slot" id="slot">
        <!-- JavaScript 动态生成内容 -->
      </div>
    </div>

    <script>
      const button = document.querySelector('button')
      const slot = document.getElementById('slot')
      let isPlaying = false
      const targetNumbers = [8, 8, 8, 9]
      const rollDurations = [1, 1.2, 1.4, 1.6]
      const shakeDelays = [0, 500, 1000, 1500]

      // 生成数字格子
      function createSlot() {
        const nums = Array.from({ length: 11 }, (_, i) => i % 10) // 0-9 加上重复的0
        const cells = Array.from({ length: 4 }, (_, index) => {
          const numElements = nums.map(num => `<div class="num">${num}</div>`).join('')
          return `
            <div class="cell">
              <div class="roll" data-index="${index}">
                ${numElements}
              </div>
            </div>
          `
        }).join('')

        slot.innerHTML = cells
      }

      // 初始化
      createSlot()
      const rolls = document.querySelectorAll('.roll')

      button.addEventListener('click', () => {
        isPlaying = !isPlaying

        if (isPlaying) {
          button.textContent = '停止'
          button.classList.add('active')
          rolls.forEach((roll, index) => {
            const rollTime = rollDurations[index] + 's'
            roll.style.animationDuration = rollTime
            roll.classList.add('active')
            roll.classList.remove('shake')
            roll.style.transform = ''
            roll.style.removeProperty('--target-y')
          })
        } else {
          button.textContent = '开始'
          button.classList.remove('active')
          rolls.forEach((roll, index) => {
            setTimeout(() => {
              roll.classList.remove('active')
              const targetPosition = -(targetNumbers[index] * 60)
              roll.style.setProperty('--target-y', `${targetPosition}px`)
              roll.style.transform = `translateY(${targetPosition}px)`
              roll.classList.add('shake')
            }, shakeDelays[index])
          })
        }
      })
    </script>
  </body>
</html>
